// import { Row } from "antd";
import "./index.less";
import { Route, Switch, Redirect, useLocation, useHistory } from "react-router-dom";
import { resourcePath } from "../../../../utils/resource";
import { useContext, useEffect, useRef, useState } from "react";
import { use, useSize } from 'ahooks'
import Center from "./Center";
import Left from "./TitleDate";
import { routes } from "../../../../utils/routes";
import Yzt from "../pages/Yzt";
import Jcyj from "../pages/Jcyj";
import { ConfigProvider, Empty, theme } from "antd";
import Home from "../pages/Home";
import Fxqhfx from "../pages/Fxqhfx";
import Right from "./Right";
import Dtfxfx from "../pages/Dtfxfx";
import Zhpg from "../pages/Zhpg";
import NewHome from "../pages/NewHome";
import AccountApi from "../../../../utils/apis/AccountApi";
import GlobalContext from "../../../../utils/GlobalContext";
import BusinessCenter from "../newPages/BusinessCenter";
import messageController from "../../../../utils/messageController";
// import CenterMap from "../common/CenterMap";
//import GlobalContext from "../../utils/GlobalContext";

const defaultSize = [1920, 1080];

export default function Main() {
	const { setUserPermissions, userPermissions } = useContext(GlobalContext)
	const [style, setStyle] = useState(
		{
			left: 0,
			top: 0,
			scale: 1
		}
	);
	const rootRef = useRef();

	// const size = useSize(rootRef)

	const history = useHistory();
	const location = useLocation();


	useEffect(() => {
		console.log("检查当前路径是否不是", location.pathname, userPermissions);
		if (userPermissions === 1) {
			if (location.pathname !== '/main/jcyj/dzjc') {
				// 重定向到 '/a'
				history.push('/main/jcyj/dzjc');
				const timer = setTimeout(() => {
					alert("当前访问权限受限！只能访问 '地震监测' ！");
				}, 1000); // 延迟1秒
			}
		}

	}, [userPermissions, location.pathname, history,]);
	useEffect(() => {

		AccountApi.userInfo().then(resp => {

			//console.log("用户信息", resp.data);
			if (resp.data?.user?.roles.map(e => {
				if (e.roleKey === "quake") {
					return 1
				} else {
					return null
				}
			}).filter(item => item === 1).length > 0) {
				//if (location.pathname !== '/main/jcyj/dzjc') {
				setUserPermissions(1)
				//confirm("当前访问权限受限！\n只能访问 '地震监测' !")
				//history.push('/main/jcyj/dzjc');

				//}

			}


		})
	}, [setUserPermissions])
	// useEffect(() => {
	// 	if (size) {
	// 		const { width, height } = size;
	// 		const resw = defaultSize[0] / width;
	// 		const resh = defaultSize[1] / height;
	// 		let res = Math.max(resw, resh);

	// 		let scale = 1 / res;

	// 		const realWidth = defaultSize[0] * scale;
	// 		const realHeight = defaultSize[1] * scale;

	// 		let left = (width - realWidth) / 2;
	// 		let top = (height - realHeight) / 2;
	// 		setStyle({
	// 			transform: `scale(${scale})`,
	// 			left: left,
	// 			top: top,
	// 			scale
	// 		})
	// 	}
	// }, [size]);
	const renderEmpty = (componentName) => {
		if (componentName === 'Table' /** 👈 5.20.0+ */) {
			return <div style={{
				minHeight: 100,
				lineHeight: "93px"
			}}>暂无数据</div>;
		}
	};

	return <ConfigProvider theme={{
		algorithm: theme.darkAlgorithm,
		token: {
			colorPrimary: '#88B2FF',
			// colorBgContainer: '#fff',
			colorBgElevated: '#192f45',
			// colorTextBase: '#fff',
			colorPrimaryBg: "rgba(255, 255, 255, 0.5)"
		}
	}} renderEmpty={renderEmpty}>
		<div className="main" ref={rootRef}>
			<div></div>
			{style && <div
				className="layout-v main-paper"
				style={{
					// ...style,
					width: '100%',
					height: '100%',
					backgroundImage: `url(${resourcePath.backgroundPng})`,
					backgroundSize: '100% 100%',
					backgroundPosition: '69px 0'

				}}
			>
				<div className="header" style={{
				}}>
					<div className="layout-h center j-center" style={{
						// background: "#0F264B",
						width: "100vw",
					}}>
						{/* <Left /> */}
						<Center />
						{/* <div className="fill" style={{
							textAlign: "right"
						}}>
							<Right />
						</div> */}
					</div>
				</div>
				<div className="content fill h0 relative" style={{
					// background: `url(${resourcePath.mapBg})`
				}}>
					<Switch>
						<Redirect exact path={"/main"} to={'/main/business-center'}></Redirect>
						<Route path={routes.home.path} component={NewHome}></Route>
						<Route path={routes.yzt.path} component={Yzt}></Route>
						<Route path={routes.jcyj.path} component={Jcyj}></Route>
						<Route path={routes.fxqhfx.path} component={Fxqhfx}></Route>
						<Route path={routes.dtfxfx.path} component={Dtfxfx}></Route>
						<Route path={routes.zhpg.path} component={Zhpg}></Route>
						<Route path={'/main/business-center'} component={BusinessCenter}></Route>
					</Switch>
				</div>

			</div>}
		</div>
	</ConfigProvider>
}
